<template>
  <div class="songMenu w">
    <!-- 热门歌单 -->
    <div class="songMenuItem" v-for="item in hotMusicLists" :key="item.id">
      <div class="banner">
        <img :src="item.picUrl" alt="" />
        <div class="playbackNum">
          <i class="iconfont icon-bofang"></i>
          <span class="count">{{ item.playCount | playCountFormat }}</span>
        </div>
      </div>
      <div class="info">
        <span class="summary" :style="rows">{{ item.name }}</span>
      </div>
    </div>
    <!-- 官方歌单 -->
    <div class="songMenuItem" v-for="item in officialMusicLists" :key="item.id">
      <div class="banner">
        <img :src="item.coverImgUrl" alt="" />
        <div class="playbackNum">
          <i class="iconfont icon-bofang"></i>
          <span class="count">{{ item.playCount | playCountFormat }}</span>
        </div>
      </div>
      <div class="info">
        <span class="summary" :style="rows">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { playCountFormat } from "@/utils/index";

export default {
  name: "SongMenu",
  props: {
    rowsNum: {
      type: Number,
      default: 2,
    },
    hotMusicLists: {
      type: Array,
      default() {
        return [];
      },
    },
    officialMusicLists: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    rows() {
      return `-webkit-line-clamp: ${this.rowsNum}`;
    },
  },
  filters: {
    playCountFormat,
  },
};
</script>

<style lang="scss" scoped>
.songMenu {
  display: flex;
  overflow-x: auto;
  .songMenuItem {
    width: 7rem;
    margin-right: 0.6rem;
    .banner {
      position: relative;
      width: 7rem;
      height: 7rem;
      img {
        width: 7rem;
        height: 7rem;
        border-radius: 0.5rem;
      }
      .playbackNum {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0.1rem 0.5rem;
        border-radius: 0.5rem;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 0.8rem;
        color: #fff;
        .count {
          margin-left: 0.3rem;
        }
      }
    }
    .info {
      width: 7rem;
      padding: 0.5rem 0.2rem 0;
      .summary {
        font-size: 0.9rem;
        color: #1a1a1a;
        // 控制文本多行显示，溢出显示省略号
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        // 按需传入，动态显示行数
        // -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>
